<template>
    <div class="map-echart">
        <div ref="chinaMap" id="china-map"></div>

    </div>



</template>

<script>
import chinaJson from '@/utils/china.json'
export default {
    data() {
        return {
            myChart: null,
            mapCityList:['北京市','四川省','重庆市','上海市'],
            mapIndex: 0,
            time:null,
        }
    },
    created() {

    },
    mounted() {
        this.initChart()

    },
    methods: {
        triggerChange() {


            if(!this.myChart) return
            if(this.time){ clearInterval(this.time)}
            this.time=  setInterval(() => {

                this.myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,

                });
                this.mapCityList.length>this.mapIndex+1?this.mapIndex++:this.mapIndex=0;

                // 显示 tooltip
                this.myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    name: this.mapCityList[this.mapIndex]
                })
                //显示高亮
                this.myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    name: this.mapCityList[this.mapIndex]

                });

               
            }, 3000);

        },
        initChart() {
            console.log(chinaJson);

            this.myChart = this.$echarts.init(this.$refs.chinaMap);
            chinaJson.features = chinaJson.features.filter(f => {
                return !f.properties.name.match(/南海/);
            });
            // 注册地图
            this.$echarts.registerMap('china', chinaJson)

            // 准备数据（示例数据）
            const data = [
                { name: '北京', value: 543 },
                { name: '天津', value: 321 },
                { name: '上海', value: 721 },
                // 其他省份数据...
            ]

            // 配置项
            const option = {
                //移除视觉映射组件（右下角小框框）
                visualMap: null,
                //提示备注
                tooltip: {
                    trigger: 'item',
                    position: 'bottom',
                    formatter: function (params) {
                        if(chinaJson.features?.length>0){
                            let jsonData=''                            
                            chinaJson.features.some(item => {
                                if(item.properties.name==params.name){
                                    jsonData=item;
                                    return true
                                }
                                return false
                            });                            
                        // 自定义内容
                            return `
                            <div style="font-weight:bold">${params.name }</div>
                                <div>坐标: ${jsonData.properties.centroid}</div>
                                <div>人口: ${jsonData.properties.adcode}</div>
                            `;

                        }else{
                            return `<div style="font-weight:bold">${params.name }</div>`
                        }
                        
    
                    },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)',
                    textStyle: {
                        color: '#FFFFFF',
                        textalign: 'center',
                        fontSize: '12px'
                    }
                },
                // 地理坐标系配置
                geo: {
                    map: 'china',
                    roam: false, // 允许缩放拖动
                    zoom: .9,  // 初始放大倍数
                    center: [105, 36], // 地图中心点
                    label: {
                        show: true, // 显示省份名称
                        color: '#fff',
                        fontSize: 10
                    },
                    // 区域样式设置
                    itemStyle: {
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                { offset: 0, color: 'rgba(10,42,90,0.8)' }, // 中心蓝
                                { offset: 1, color: 'rgba(5,25,60,1)' }    // 边缘深蓝
                            ]
                        },
                        borderColor: '#1a7fd8', // 科技蓝边框
                        borderWidth: 1.5,
                        shadowColor: 'rgba(0,198,255,0.4)', // 发光效果
                        shadowBlur: 15,
                        shadowOffsetY: 5
                    },

                    //高亮状态样式
                    emphasis: {
                        itemStyle: {
                            areaColor: '#00b4ff', // 高亮蓝
                            borderColor: '#00f7ff',
                            shadowColor: 'rgba(0,247,255,0.8)'
                        },
                        label: { color: '#fff' }
                    },

                    // 移除南海诸岛等小框框
                    regions: [{
                        name: '南海诸岛',
                        label: { show: false },
                        itemStyle: {
                            areaColor: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)'
                        },
                        silent: true
                    }],

                    // 限制显示范围（中国大陆区域）
                    boundingCoords: [
                        [73.55, 18.15], // 西南角
                        [135.05, 53.55]  // 东北角
                    ]
                },

                series: [{
                    type: 'map',
                    map: 'china',
                    geoIndex: 0,
                    roam: false
                }]
            }
            this.myChart.setOption(option)
            //定时切换城市
            this.triggerChange()
            // this.myChart.on('click', (params) => {
            //     console.log('点击了:', params)
            // })
            //  窗口大小变化时自适应
            window.addEventListener('resize', () => this.myChart.resize())
        }


    }
}

</script>

<style lang="scss">
.map-echart {
    background: #467ddd;
    width: 100vw;
    height: 100vh;

    #china-map {
        width: 100%;
        height: 100%;

    }

}
</style>